<template>
  <el-dialog title="更新头像" :visible="value" @close="close">
    <cropper-canvas style="height: 240px;" background>
      <cropper-image ref="myImg" :src="selectImg" alt="Picture" rotatable scalable skewable translatable />
      <cropper-shade hidden />
      <cropper-handle action="select" plain />
      <cropper-selection id="cropperSelection" initial-aspect-ratio="1.5" initial-coverage="0.5" movable resizable>
        <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)" />
        <cropper-handle action="n-resize" />
        <cropper-handle action="e-resize" />
        <cropper-handle action="s-resize" />
        <cropper-handle action="w-resize" />
        <cropper-handle action="ne-resize" />
        <cropper-handle action="nw-resize" />
        <cropper-handle action="se-resize" />
        <cropper-handle action="sw-resize" />
      </cropper-selection>
    </cropper-canvas>

    <div class="cropper-viewers">
      <cropper-viewer selection="#cropperSelection" style="width: 320px;" />
      <cropper-viewer selection="#cropperSelection" style="width: 160px;" />
      <cropper-viewer selection="#cropperSelection" style="width: 80px;" />
      <cropper-viewer selection="#cropperSelection" style="width: 40px;" />
    </div>
    <el-row type="flex" justify="end">
      <el-button size="mini" @click="close">取消</el-button>
      <el-button size="mini" type="primary" @click="submit">确认</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectImg: ''
    }
  },
  methods: {
    close() {
      this.$emit('input', close)
    },
    submit() {
      this.close()
    }
  }
}
</script>

<style>
.cropper-viewers {
  margin-top: 0.5rem;
}

.cropper-viewers > cropper-viewer {
  border: 1px solid var(--vp-c-divider);
  display: inline-block;
  margin-right: 0.25rem;
}
</style>
